<!doctype html>
<html lang="en">
    <head>
        <!-- Title and Icon -->

        <title id="clientTitle">MiroTalk WebRTC Video call, Chat Room & Screen Sharing.</title>
        <link id="icon" rel="shortcut icon" href="../images/logo.svg" />
        <link id="appleTouchIcon" rel="apple-touch-icon" href="../images/logo.svg" />

        <!-- Meta Information -->

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta
            name="viewport"
            content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
        />
        <meta
            name="description"
            content="MiroTalk powered by WebRTC, Real-time Simple Secure Fast video calls, chat and screen sharing capabilities in the browser, from your mobile or desktop."
        />
        <meta
            name="keywords"
            content="webrtc, openAI, chatGPT, webrtc stun, webrtc turn, video meeting, video chat, multi video chat, peer to peer, p2p, zoom"
        />

        <!-- https://ogp.me -->

        <meta property="og:type" content="{{OG_TYPE}}" />
        <meta property="og:site_name" content="{{OG_SITE_NAME}}" />
        <meta property="og:title" content="{{OG_TITLE}}" />
        <meta property="og:description" content="{{OG_DESCRIPTION}}" />
        <meta property="og:image" content="{{OG_IMAGE}}" />
        <meta property="og:url" content="{{OG_URL}}" />

        <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon.png" />

        <!-- StyleSheet -->

        <link rel="stylesheet" href="../css/client.css" />
        <link rel="stylesheet" href="../css/videoGrid.css" />
        <link rel="stylesheet" href="../css/whiteboard.css" />

        <!-- https://cdnjs.com/libraries/font-awesome -->

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

        <!-- https://animate.style 4 using for swal fadeIn-Out -->

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

        <!-- flatpickr  https://flatpickr.js.org/themes/ -->

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
        <link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css" />

        <!--  pickr  https://github.com/simonwep/pickr -->

        <!-- 'classic' theme -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css" />
        <!-- 'monolith' theme -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css" />
        <!-- 'nano' theme -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css" />

        <!-- Highlight  https://github.com/highlightjs/highlight.js -->

        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/atom-one-dark.min.css"
        />

        <!-- JavaScripts -->

        <script async src="../js/umami.js"></script>
    </head>

    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>

        <!-- just 4SEO Optimization -->

        <div id="webRTCSeo">
            <h1>WebRTC</h1>
        </div>

        <!-- show this before to join -->

        <div id="loadingDiv" class="center pulsate">
            <h1>Loading</h1>
            <img class="loading-img" src="../images/loading.gif" />
            <pre>
Please allow the camera or microphone
access to use this app.
            </pre>
        </div>

        <!-- init user devices -->

        <div id="initUser" class="init-user hidden">
            <!-- <p>Please allow the camera & microphone access to use this app.</p> -->
            <div id="initVideoContainer" class="init-video-container">
                <video
                    id="initVideo"
                    playsinline="true"
                    autoplay=""
                    class="mirror"
                    poster="../images/loader.gif"
                ></video>
            </div>
            <div class="initComands">
                <button id="initVideoBtn" class="fas fa-video"></button>
                <button id="initAudioBtn" class="fas fa-microphone"></button>
                <button id="initScreenShareBtn" class="fas fa-desktop"></button>
                <button id="initVideoMirrorBtn" class="fas fa-arrow-right-arrow-left"></button>
                <button id="initUsernameEmojiButton" class="fas fa-smile"></button>
                <select id="initVideoSelect" class="form-select text-light bg-dark"></select>
                <select id="initMicrophoneSelect" class="form-select text-light bg-dark"></select>
                <select id="initSpeakerSelect" class="form-select text-light bg-dark"></select>
            </div>
        </div>

        <!-- Add emoji to username -->

        <div id="usernameEmoji" class="usernameEmoji fadein center hidden"></div>

        <!-- Start buttons bar https://fontawesome.com/icons?d=gallery -->

        <div id="buttonsBar" class="fadein">
            <button id="shareRoomBtn" class="fas fa-share-alt"></button>
            <button id="hideMeBtn" class="fas fa-user"></button>
            <button id="recordStreamBtn" class="fas fa-record-vinyl"></button>
            <button id="fullScreenBtn" class="fas fa-expand-alt"></button>
            <button id="roomEmojiPickerBtn" class="fas fa-face-smile"></button>
            <button id="captionBtn" class="fas fa-closed-captioning"></button>
            <button id="whiteboardBtn" class="fas fa-chalkboard-teacher"></button>
            <button id="snapshotRoomBtn" class="fas fas fa-camera-retro"></button>
            <button id="fileShareBtn" class="fas fa-folder-open"></button>
            <button id="documentPiPBtn" class="fas fa-images"></button>
            <button id="aboutBtn" class="fas fa-question"></button>
        </div>
        <!-- End left buttons -->

        <!-- Start bottom buttons -->
        <div id="bottomButtons" class="fadein">
            <button id="toggleExtraBtn" class="fas fa-chevron-down"></button>
            <button id="audioBtn" class="fas fa-microphone"></button>
            <button id="videoBtn" class="fas fa-video"></button>
            <button id="swapCameraBtn" class="fas fa-camera-rotate"></button>
            <button id="screenShareBtn" class="fas fa-desktop"></button>
            <button id="myHandBtn" class="fas fa-hand-paper"></button>
            <button id="chatRoomBtn" class="fas fa-comment"></button>
            <button id="mySettingsBtn" class="fas fa-cogs"></button>
            <button id="leaveRoomBtn" class="fa-solid fa-phone-slash"></button>
        </div>

        <!-- End bottom buttons -->

        <!-- Start room emoji picker -->

        <div id="emojiPickerContainer" class="roomEmoji fadein">
            <div id="emojiPickerHeader" class="emojiPickerHeader">
                <button id="closeEmojiPickerContainer" class="fas fa-times"></button>
            </div>
        </div>
        <div id="userEmoji" class="userEmoji"></div>

        <!-- End room emoji picker -->

        <!-- Start chat room 
        https://codepen.io/sajadhsm/pen/odaBdd
        https://getemoji.com
        -->

        <section id="msgerDraggable" class="msger-draggable fadein">
            <section id="msger" class="msger">
                <header id="msgerHeader" class="msger-header">
                    <div class="msger-header-title"></div>
                    <div class="msger-header-options">
                        <button id="msgerTogglePin" class="fas fa-map-pin"></button>
                        <button id="msgerTheme" class="fas fa-ghost"></button>
                        <button id="msgerMaxBtn" class="fas fa-expand"></button>
                        <button id="msgerMinBtn" class="fas fa-compress"></button>
                        <div class="dropdown-custom">
                            <button
                                class="dropdown-toggle-custom"
                                type="button"
                                id="msgerDropDownMenuBtn"
                                data-bs-toggle="dropdown-custom"
                                aria-expanded="false"
                            >
                                <i class="fas fa-bars"></i>
                            </button>
                            <ul
                                id="msgerDropDownContent"
                                class="dropdown-menu-custom"
                                aria-labelledby="msgerDropDownMenuBtn"
                            >
                                <li>
                                    <hr />
                                    <div id="msgerShowChatOnMsgDiv" class="title ml-10">
                                        <i class="fa-solid fa-eye"></i>
                                        <label class="switch ml-10">
                                            <input id="msgerShowChatOnMsg" type="checkbox" checked />
                                            <span class="slider round"></span>
                                        </label>
                                    </div>
                                    <div id="msgerSpeechMsgDiv" class="title">
                                        <i class="fas fa-volume-high ml-10"></i>
                                        <label class="switch ml-10">
                                            <input id="msgerSpeechMsg" type="checkbox" />
                                            <span class="slider round"></span>
                                        </label>
                                    </div>
                                    <hr />
                                </li>
                                <li>
                                    <button id="msgerSaveBtn"><i class="fas fa-save"></i> Save messages</button>
                                </li>
                                <li>
                                    <button id="msgerClean"><i class="fas fa-trash"></i> Clean messages</button>
                                </li>
                            </ul>
                        </div>
                        <button id="msgerClose" class="fas fa-times"></button>
                    </div>
                </header>

                <main id="msgerChat" class="msger-chat"></main>

                <!-- Start emoji picker -->

                <section id="msgerEmojiPicker" class="hidden fadein chatEmojiPicker"></section>

                <!-- End emoji picker -->

                <div class="msger-inputarea">
                    <textarea
                        rows="1"
                        cols="1"
                        id="msgerInput"
                        class="msger-input"
                        placeholder="Write a message..."
                    ></textarea>
                </div>

                <div class="msger-input-buttons">
                    <button id="msgerEmojiBtn" class="fas fa-smile"></button>
                    <button id="msgerMarkdownBtn" class="fab fa-markdown"></button>
                    <button id="msgerGPTBtn" class="fas fa-robot"></button>
                    <button id="msgerShareFileBtn" class="fas fa-paperclip"></button>
                    <button id="msgerVideoUrlBtn" class="fab fa-youtube"></button>
                    <button id="msgerCPBtn" class="fas fa-users"></button>
                    <button id="msgerCleanTextBtn" class="fas fa-trash"></button>
                    <button id="msgerPasteBtn" class="fas fa-paste"></button>
                    <button id="msgerSendBtn" class="fas fa-paper-plane"></button>
                </div>
            </section>

            <!-- Start private msg -->

            <section id="msgerCP" class="center fadein">
                <section id="msgerCPSec" class="msger">
                    <header id="msgerCPHeader" class="msger-private-header">
                        <div class="msger-header-title"><i class="fas fa-comment-alt"></i> Send Private messages</div>
                        <div class="msger-header-options">
                            <button id="msgerCPCloseBtn" class="fas fa-times"></button>
                        </div>
                    </header>
                    <main id="msgerCPChat" class="msger-chat">
                        <div class="search-container">
                            <input
                                id="searchPeerBarName"
                                type="text"
                                placeholder=" 🔍 Search peer by name..."
                                maxlength="32"
                                name="search"
                            />
                        </div>
                        <br />
                        <div id="msgerCPList"></div>
                    </main>
                </section>
            </section>

            <!-- End private msg -->
        </section>

        <!-- End chat room -->

        <!-- Start of caption section -->

        <section id="captionDraggable" class="caption-draggable fadein">
            <section id="caption" class="caption">
                <header id="captionHeader" class="caption-header">
                    <div class="caption-header-title">
                        <button id="speechRecognitionIcon" class="fas fa-microphone-alt"></button>
                    </div>
                    <div class="caption-header-options">
                        <button id="captionTogglePin" class="fas fa-map-pin"></button>
                        <button id="captionMaxBtn" class="fas fa-expand"></button>
                        <button id="captionMinBtn" class="fas fa-compress"></button>
                        <button id="captionTheme" class="fas fa-ghost"></button>
                        <button id="captionSaveBtn" class="fas fa-save"></button>
                        <button id="captionClean" class="fas fa-trash"></button>
                        <button id="captionClose" class="fas fa-times"></button>
                    </div>
                </header>

                <main id="captionChat" class="caption-chat"></main>
                <div id="captionFooter" class="caption-inputarea">
                    <select id="recognitionLanguage"></select>
                    <select id="recognitionDialect"></select>
                    <button id="speechRecognitionStart"><i class="fas fa-play"></i> Start</button>
                    <button id="speechRecognitionStop"><i class="fas fa-stop"></i> Stop</button>
                </div>
            </section>
        </section>

        <!-- End of caption section -->

        <!-- Start my settings -->

        <section id="mySettings" class="center fadein">
            <header id="mySettingsHeader">
                <button id="mySettingsCloseBtn" class="fas fa-times"></button>
            </header>
            <main class="mySettingsMain">
                <div class="tab">
                    <button id="tabRoomBtn" class="fas fa-home tablinks">
                        <p class="tabButtonText">Room</p>
                    </button>
                    <button id="tabVideoBtn" class="fas fa-video tablinks">
                        <p class="tabButtonText">Video</p>
                    </button>
                    <button id="tabAudioBtn" class="fas fa-microphone tablinks">
                        <p class="tabButtonText">Audio</p>
                    </button>
                    <button id="tabRecordingBtn" class="fas fa-record-vinyl tablinks">
                        <p class="tabButtonText">Recording</p>
                    </button>
                    <button id="tabVideoShareBtn" class="fab fa-youtube tablinks">
                        <p class="tabButtonText">Media</p>
                    </button>
                    <button id="tabParticipantsBtn" class="fa-solid fa-users tablinks">
                        <p class="tabButtonText">Participants</p>
                    </button>
                    <button id="tabProfileBtn" class="fa-solid fa-user tablinks">
                        <p class="tabButtonText">Profile</p>
                    </button>
                    <button id="tabShortcutsBtn" class="fas fa-keyboard tablinks">
                        <p class="tabButtonText">Shortcuts</p>
                    </button>
                    <button id="tabNetworkBtn" class="fa-solid fa-network-wired tablinks">
                        <p class="tabButtonText">Network</p>
                    </button>
                    <button id="tabStylingBtn" class="fas fa-palette tablinks">
                        <p class="tabButtonText">Style</p>
                    </button>
                    <button id="tabLanguagesBtn" class="fas fa-globe tablinks">
                        <p class="tabButtonText">Language</p>
                    </button>
                </div>

                <div class="tabActions">
                    <div id="tabRoom" class="tabcontent">
                        <table class="mySettingsTable">
                            <tr>
                                <td>
                                    <div class="title">
                                        <i class="fa-solid fa-person-shelter"></i>
                                        <p id="myRoomId" class="cp">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</p>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <div id="tabRoomSecurity">
                            <button id="lockRoomBtn" class="orange">
                                <i class="fas fa-lock-open orange"></i>&nbsp;Lock room
                            </button>
                            <button id="unlockRoomBtn" class="red">
                                <i class="fas fa-lock red"></i>&nbsp;Unlock room
                            </button>
                            <br />
                        </div>
                        <div id="tabEmailInvitation">
                            <button id="roomSendEmailBtn">
                                <i class="fas fa-envelope-circle-check"></i>&nbsp;Send email invitation
                                <br />
                            </button>
                        </div>
                        <br />
                        <br />
                        <table id="mySettingsTable">
                            <tr>
                                <td>
                                    <div class="title">
                                        <i class="fas fa-microphone-lines"></i>
                                        <p>Volume bar</p>
                                    </div>
                                </td>
                                <td><input id="switchAudioPitchBar" class="toggle" type="checkbox" checked /></td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="title">
                                        <i class="fas fa-music"></i>
                                        <p>Sounds</p>
                                    </div>
                                </td>
                                <td><input id="switchSounds" class="toggle" type="checkbox" checked /></td>
                            </tr>
                            <tr id="shareOnJoinButton">
                                <td>
                                    <div class="title">
                                        <i class="fas fa-share-alt"></i>
                                        <p>Share</p>
                                    </div>
                                </td>
                                <td><input id="switchShare" class="toggle" type="checkbox" checked /></td>
                            </tr>
                            <tr id="keepButtonsVisibleButton">
                                <td>
                                    <div class="title">
                                        <i class="fas fa-eye"></i>
                                        <p>Buttons</p>
                                    </div>
                                </td>
                                <td><input id="switchKeepButtonsVisible" class="toggle" type="checkbox" /></td>
                            </tr>
                        </table>
                    </div>

                    <div id="tabVideo" class="tabcontent">
                        <div>
                            <div class="title">
                                <i class="fas fa-video"></i>
                                <p>Video Source</p>
                            </div>
                            <br />
                            <select id="videoSource"></select>
                        </div>
                        <br />
                        <div class="title">
                            <i class="fas fa-palette"></i>
                            <p>Video Quality</p>
                        </div>
                        <br />
                        <select id="videoQuality">
                            <option value="default">Default</option>
                            <option value="qvgaVideo">QVGA</option>
                            <option value="vgaVideo">VGA</option>
                            <option value="hdVideo">HD</option>
                            <option value="fhdVideo">FULL HD</option>
                            <option value="2kVideo">2k</option>
                            <option value="4kVideo">4K</option>
                            <option value="6kVideo">6K</option>
                            <option value="8kVideo">8K</option>
                        </select>
                        <br />
                        <div class="title">
                            <i class="fa-solid fa-film"></i>
                            <p>Video fit</p>
                        </div>
                        <br />
                        <select id="videoObjFitSelect">
                            <option value="fill">Fill</option>
                            <option value="contain">Contain</option>
                            <option value="cover">Cover</option>
                            <option value="scale-down">Scale-down</option>
                            <option value="none">None</option>
                        </select>
                        <div id="videoFpsDiv">
                            <br />
                            <div class="title">
                                <i class="fa-solid fa-camera"></i>
                                <p>Camera FPS</p>
                            </div>
                            <br />
                            <select id="videoFps">
                                <option value="60">60 - frame-per-second</option>
                                <option value="30">30 - frame-per-second</option>
                                <option value="15">15 - frame-per-second</option>
                                <option value="5">5 - frame-per-second</option>
                            </select>
                        </div>
                        <div id="screenFpsDiv">
                            <br />
                            <div class="title">
                                <i class="fa-solid fa-desktop"></i>
                                <p>Screen FPS</p>
                            </div>
                            <br />
                            <select id="screenFps">
                                <option value="60">60 - frame-per-second</option>
                                <option value="30">30 - frame-per-second</option>
                                <option value="15">15 - frame-per-second</option>
                                <option value="5">5 - frame-per-second</option>
                            </select>
                        </div>
                    </div>

                    <div id="tabAudio" class="tabcontent">
                        <div>
                            <div class="title">
                                <i class="fas fa-microphone"></i>
                                <p>Microphone</p>
                            </div>
                            <br />
                            <select id="audioSource"></select>
                        </div>
                        <br />
                        <div class="volume-container">
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                        </div>
                        <br />
                        <div class="dropdown" id="dropDownMicOptions">
                            <button class="buttons" id="micOptionsBtn" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-screwdriver-wrench"></i>
                                <p>Advance options</p>
                                <i class="fas fa-caret-down"></i>
                            </button>
                            <br /><br /><br /><br />
                            <div id="micDropDownMenu" class="dropdown-menu" aria-labelledby="micOptionsBtn">
                                <table class="mySettingsTable">
                                    <tr id="autoGainControlButton">
                                        <td class="microphone-table-width">
                                            <div class="title">
                                                <!-- <i class="fas fa-ear-listen"></i> -->
                                                <p>Auto gain control</p>
                                            </div>
                                        </td>
                                        <td><input class="toggle" id="switchAutoGainControl" type="checkbox" /></td>
                                    </tr>
                                    <tr id="echoCancellationButton">
                                        <td class="microphone-table-width">
                                            <div class="title">
                                                <!-- <i class="fas fa-ear-listen"></i> -->
                                                <p>Echo cancellation</p>
                                            </div>
                                        </td>
                                        <td>
                                            <input class="toggle" id="switchEchoCancellation" type="checkbox" checked />
                                        </td>
                                    </tr>
                                    <tr id="noiseSuppressionButton">
                                        <td class="microphone-table-width">
                                            <div class="title">
                                                <!-- <i class="fas fa-ear-listen"></i> -->
                                                <p>Noise suppression</p>
                                            </div>
                                        </td>
                                        <td>
                                            <input class="toggle" id="switchNoiseSuppression" type="checkbox" checked />
                                        </td>
                                    </tr>
                                    <tr id="micLatencyButton">
                                        <td class="microphone-table-width">
                                            <div class="title">
                                                <!-- <i class="fab fa-audible"></i> -->
                                                <p>Latency</p>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="title">
                                                <input
                                                    type="range"
                                                    class="mic-input-range"
                                                    id="micLatencyRange"
                                                    name="latency"
                                                    min="10"
                                                    max="1000"
                                                    value="50"
                                                    step="10"
                                                />
                                                <p><span id="micLatencyValue">50</span>&nbsp;ms</p>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="micVolumeButton">
                                        <td class="microphone-table-width">
                                            <div class="title">
                                                <!-- <i class="fas fa-volume-high"></i> -->
                                                <p>Volume</p>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <input
                                                    type="range"
                                                    class="mic-input-range"
                                                    id="micVolumeRange"
                                                    name="volume"
                                                    min="0"
                                                    max="100"
                                                    value="100"
                                                    step="10"
                                                />
                                                <p><span id="micVolumeValue">100</span>&nbsp;%</p>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="sampleRateButton">
                                        <td class="microphone-table-width">
                                            <div class="title">
                                                <!-- <i class="fas fa-microphone-lines"></i> -->
                                                <p>Sample rate</p>
                                            </div>
                                        </td>
                                        <td>
                                            <select id="sampleRateSelect">
                                                <option value="48000">48000 Hz</option>
                                                <option value="44100">44100 Hz</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr id="sampleSizeButton">
                                        <td class="microphone-table-width">
                                            <div class="title">
                                                <!-- <i class="fas fa-microphone-lines"></i> -->
                                                <p>Sample size</p>
                                            </div>
                                        </td>
                                        <td>
                                            <select id="sampleSizeSelect">
                                                <option value="16">16 bits</option>
                                                <option value="32">32 bits</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr id="channelCountButton">
                                        <td class="microphone-table-width">
                                            <div class="title">
                                                <!-- <i class="fas fa-microphone-lines"></i> -->
                                                <p>Channel count</p>
                                            </div>
                                        </td>
                                        <td>
                                            <select id="channelCountSelect">
                                                <option value="1">1 (mono)</option>
                                                <option value="2">2 (stereo)</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button id="applyAudioOptionsBtn" class="fas fa-check">
                                                <p>Apply options</p>
                                            </button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div id="audioOutputDiv">
                            <div class="title">
                                <i class="fas fa-headphones"></i>
                                <p>Speaker</p>
                            </div>
                            <br />
                            <select id="audioOutput"></select>
                            <button id="speakerTestBtn" class="buttons">
                                <i class="fa-solid fa-circle-play"></i>
                                <p>Test speaker</p>
                            </button>
                            <br /><br /><br /><br /><br />
                        </div>
                        <table id="mySettingsTable">
                            <tr id="pushToTalkDiv">
                                <td>
                                    <div class="title">
                                        <i class="fa-solid fa-hand-pointer"></i>
                                        <p>Push to talk</p>
                                    </div>
                                </td>
                                <td><input id="switchPushToTalk" class="toggle" type="checkbox" /></td>
                            </tr>
                        </table>
                    </div>

                    <div id="tabRecording" class="tabcontent">
                        <img id="recImage" src="../images/recording.png" />
                        <div id="recOptions">
                            <table class="settingsTable">
                                <tr>
                                    <td>
                                        <div class="title">
                                            <i class="fa-solid fa-film"></i>
                                            <p>Prioritize H.264</p>
                                        </div>
                                    </td>
                                    <td><input class="toggle" id="switchH264Recording" type="checkbox" /></td>
                                </tr>
                            </table>
                            <hr class="hr" />
                        </div>
                        <div class="trow">
                            <span class="clw notranslate" id="recordingTime"></span>
                            <br />
                            <button id="pauseRecBtn" class="buttons">
                                <i class="far fa-pause-circle"></i>
                                <p>Pause recording</p>
                            </button>
                            <button id="resumeRecBtn" class="buttons">
                                <i class="far fa-play-circle"></i>
                                <p>Resume recording</p>
                            </button>
                        </div>
                        <div class="clw" id="lastRecordingInfo"></div>
                    </div>

                    <div id="tabMedia" class="tabcontent">
                        <button id="shareMediaAudioVideoBtn" class="buttons">
                            <i class="fa-solid fa-circle-play"></i>
                            <p>Share a Video or Audio</p>
                        </button>
                    </div>

                    <div id="tabParticipants" class="tabcontent">
                        <div class="title">
                            <i class="fa-solid fa-users"></i>
                            <p id="peersCount"></p>
                        </div>
                        <br />
                        <div id="tabRoomParticipants">
                            <br />
                            <button id="captionEveryoneBtn"><i class="fas fa-play"></i>&nbsp;Start captions</button>
                            <button id="muteEveryoneBtn"><i class="fas fa-microphone"></i>&nbsp;Mute everyone</button>
                            <button id="hideEveryoneBtn"><i class="fas fa-video"></i>&nbsp;Hide everyone</button>
                            <button id="ejectEveryoneBtn">
                                <i class="fas fa-right-from-bracket"></i>&nbsp;Eject everyone
                            </button>
                        </div>
                    </div>

                    <div id="tabShortcuts" class="tabcontent">
                        <table class="mySettingsTable">
                            <tr>
                                <td>
                                    <div class="title">
                                        <i class="fa-solid fa-keyboard"></i>
                                        <p>Keyboard shortcuts</p>
                                    </div>
                                </td>
                                <td><input class="toggle" id="switchShortcuts" type="checkbox" /></td>
                            </tr>
                        </table>
                        <div>
                            <table id="shortcutsTable">
                                <thead>
                                    <tr>
                                        <th>Shortcut</th>
                                        <th>Icon</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><i class="fa-solid fa-a"></i></td>
                                        <td><i class="fas fa-microphone"></i></td>
                                        <td><strong>Toggle</strong> microphone</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-solid fa-v"></i></td>
                                        <td><i class="fas fa-video"></i></td>
                                        <td><strong>Toggle</strong> camera</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-solid fa-s"></i></td>
                                        <td><i class="fas fa-desktop"></i></td>
                                        <td><strong>Toggle</strong> screen</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-solid fa-h"></i></td>
                                        <td><i class="fas fa-hand-paper"></i></td>
                                        <td><strong>Toggle</strong> raise hand</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-solid fa-c"></i></td>
                                        <td><i class="fas fa-comments"></i></td>
                                        <td><strong>Toggle</strong> chat</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-solid fa-o"></i></td>
                                        <td><i class="fas fa-cogs"></i></td>
                                        <td><strong>Toggle</strong> settings</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-solid fa-x"></i></td>
                                        <td><i class="fas fa-user"></i></td>
                                        <td><strong>Toggle</strong> hide myself</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-solid fa-r"></i></td>
                                        <td><i class="fas fa-record-vinyl"></i></td>
                                        <td><strong>Toggle</strong> recording</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-solid fa-e"></i></td>
                                        <td><i class="fas fa-face-smile"></i></td>
                                        <td><strong>Toggle</strong> emoji</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-solid fa-k"></i></td>
                                        <td><i class="fas fa-closed-captioning"></i></td>
                                        <td><strong>Toggle</strong> captions</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-solid fa-w"></i></td>
                                        <td><i class="fas fa-chalkboard-teacher"></i></td>
                                        <td><strong>Toggle</strong> whiteboard</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-solid fa-d"></i></td>
                                        <td><i class="fas fa-images"></i></td>
                                        <td><strong>Toggle</strong> document PIP</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-solid fa-t"></i></td>
                                        <td><i class="fas fas fa-camera-retro"></i></td>
                                        <td><strong>Snapshot</strong> screen/window/tab</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-solid fa-f"></i></td>
                                        <td><i class="fas fa-folder-open"></i></td>
                                        <td><strong>Share</strong> the file</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div id="tabProfile" class="tabcontent">
                        <div id="tabRoomPeerName">
                            <div>
                                <img id="myProfileAvatar" />
                            </div>
                            <br />
                            <div class="title">
                                <i class="fas fa-user"></i>
                                <p>Name</p>
                            </div>
                            <br /><br />
                            <div>
                                <input id="myPeerNameSet" type="text" placeholder="Change name..." maxlength="32" />
                                <button id="myPeerNameSetBtn"><i class="fas fa-user-edit"></i>&nbsp;Change name</button>
                            </div>
                        </div>
                        <br />
                        <div class="title">
                            <i class="fa-solid fa-user-shield"></i>
                            <p>Presenter:</p>
                            <p id="isPeerPresenter">true</p>
                        </div>
                        <br /><br />
                        <div class="title">
                            <i class="fa-solid fa-circle-info"></i>
                            <p>Extra info:</p>
                        </div>
                        <div class="extra-info-container">
                            <pre id="extraInfo"></pre>
                        </div>
                    </div>

                    <div id="tabNetwork" class="tabcontent">
                        <table id="mySettingsTable">
                            <tr>
                                <td>
                                    <div class="title">
                                        <i class="fa-solid fa-location-dot"></i>
                                        <p>IP</p>
                                    </div>
                                </td>
                                <td><p id="networkIP"></p></td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="title">
                                        <i class="fa-solid fa-house-signal"></i>
                                        <p>Host</p>
                                    </div>
                                </td>
                                <td><p id="networkHost">🔴</p></td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="title">
                                        <i class="fa-solid fa-globe"></i>
                                        <p>Stun</p>
                                    </div>
                                </td>
                                <td><p id="networkStun">🔴</p></td>
                            </tr>
                            <tr id="shareOnJoinButton">
                                <td>
                                    <div class="title">
                                        <i class="fa-solid fa-tower-cell"></i>
                                        <p>Turn</p>
                                    </div>
                                </td>
                                <td><p id="networkTurn">🔴</p></td>
                            </tr>
                        </table>
                        <!-- <hr class="hr" /> -->
                    </div>

                    <div id="tabStyling" class="tabcontent">
                        <div class="title">
                            <i class="fa-solid fa-palette"></i>
                            <p>Theme</p>
                        </div>
                        <br />
                        <select id="mirotalkTheme">
                            <option value="dark">⚫️ Dark</option>
                            <option value="grey">⚪️ Grey</option>
                            <option value="green">🟢 Green</option>
                            <option value="blue">🔵 Blue</option>
                            <option value="red">🔴 Red</option>
                            <option value="purple">🟣 Purple</option>
                            <option value="orange">🟠 Orange</option>
                            <option value="yellow">🟡 Yellow</option>
                        </select>
                        <br />
                        <div class="title">
                            <i class="fas fa-fill-drip"></i>
                            <p>Custom theme</p>
                        </div>
                        <br />
                        <input id="themeColorPicker" class="theme-color-picker" type="text" />
                        <br />
                        <div class="inline-check-box">
                            <div>
                                <div class="title">
                                    <i class="fas fa-save"></i>
                                    <p>Keep custom</p>
                                </div>
                            </div>
                            <input id="keepCustomTheme" class="toggle" type="checkbox" />
                        </div>
                        <br />
                        <div class="title">
                            <i class="fa-solid fa-up-down-left-right"></i>
                            <p>Buttons bar</p>
                        </div>
                        <br />
                        <select id="mainButtonsBarPosition">
                            <option value="vertical">Vertical</option>
                            <option value="horizontal">Horizontal</option>
                        </select>
                        <br />
                        <div id="pinUnpinGridDiv">
                            <div class="title">
                                <i class="fa-solid fa-map-pin"></i>
                                <p>Pin video position</p>
                            </div>
                            <br />
                            <select id="pinVideoPositionSelect">
                                <option value="vertical">Vertical</option>
                                <option value="horizontal">Horizontal</option>
                                <option value="top">Top</option>
                            </select>
                        </div>
                    </div>

                    <div id="tabLanguages" class="tabcontent">
                        <div class="title">
                            <i class="fa-solid fa-language"></i>
                            <p>Language</p>
                        </div>
                        <br />
                        <div id="google_translate_element"></div>
                        <br />
                    </div>
                    <br />
                </div>
            </main>
        </section>

        <!-- End my settings -->

        <!-- Start whiteboard -->

        <section id="whiteboard" class="hidden">
            <header id="whiteboardHeader" class="whiteboard-header">
                <div id="whiteboardTitle" class="whiteboard-header-title">
                    <button id="whiteboardCloseBtn" class="fas fa-times"></button>
                    <button id="whiteboardLockBtn" class="fa-solid fa-lock-open"></button>
                    <button id="whiteboardUnlockBtn" class="fa-solid fa-lock"></button>
                </div>
                <div id="whiteboardOptions" class="whiteboard-header-options">
                    <button id="whiteboardGhostButton" class="fas fa-circle-half-stroke"></button>
                    <input id="wbBackgroundColorEl" class="whiteboardColorPicker" type="color" value="#000000" />
                    <input id="wbDrawingColorEl" class="whiteboardColorPicker" type="color" value="#FFFFFF" />
                    <button id="whiteboardPencilBtn" class="fas fa-pencil-alt"></button>
                    <button id="whiteboardObjectBtn" class="fas fa-mouse-pointer"></button>
                    <button id="whiteboardUndoBtn" class="fas fa-undo"></button>
                    <button id="whiteboardRedoBtn" class="fas fa-redo"></button>
                    <div class="whiteboard-dropdown">
                        <button
                            class="whiteboard-dropdown-toggle"
                            type="button"
                            id="whiteboardDropDownMenuBtn"
                            data-bs-toggle="whiteboard-dropdown"
                            aria-expanded="false"
                        >
                            <i class="fas fa-ellipsis-vertical"></i>
                        </button>
                        <div
                            id="whiteboardDropdownMenu"
                            class="whiteboard-dropdown-menu"
                            aria-labelledby="whiteboardDropDownMenu"
                        >
                            <button id="whiteboardImgFileBtn"><i class="far fa-image"></i> Add image file</button>
                            <button id="whiteboardImgUrlBtn"><i class="fas fa-link"></i> Add image URL</button>
                            <button id="whiteboardPdfFileBtn"><i class="far fa-file-pdf"></i> Add pdf file</button>
                            <button id="whiteboardTextBtn"><i class="fas fa-spell-check"></i> Add text</button>
                            <button id="whiteboardLineBtn"><i class="fas fa-slash"></i> Add line</button>
                            <button id="whiteboardRectBtn"><i class="far fa-square"></i> Add rectangle</button>
                            <button id="whiteboardTriangleBtn">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="1em"
                                    height="1em"
                                    viewBox="0 0 24 24"
                                    fill="#FFFFFF"
                                >
                                    <path d="M12 5.887l8.468 14.113h-16.936l8.468-14.113zm0-3.887l-12 20h24l-12-20z" />
                                </svg>
                                Add triangle
                            </button>
                            <button id="whiteboardCircleBtn"><i class="far fa-circle"></i> Add circle</button>
                            <button id="whiteboardSaveBtn"><i class="fas fa-save"></i> Save</button>
                            <button id="whiteboardEraserBtn"><i class="fas fa-eraser"></i> Eraser</button>
                            <button id="whiteboardCleanBtn"><i class="fas fa-trash"></i> Clean</button>
                        </div>
                    </div>
                </div>
            </header>
            <main>
                <canvas id="wbCanvas"></canvas>
            </main>
        </section>

        <!-- End whiteboard -->

        <!-- Start File Send -->

        <div id="sendFileDiv" class="center fadein">
            <img id="imgShareSend" src="../images/share.png" alt="mirotalk-share-send" class="center-img" /><br />
            <div id="sendFileInfo"></div>
            <div id="sendFilePercentage"></div>
            <progress id="sendProgress" max="0" value="0"></progress>
            <button id="sendAbortBtn"><i class="fas fa-stop-circle"></i>&nbsp; Abort</button>
        </div>

        <!-- End File Send -->

        <!-- Start File Receive -->

        <div id="receiveFileDiv" class="center fadein">
            <img id="imgShareReceive" src="../images/share.png" alt="mirotalk-share-receive" class="center-img" /><br />
            <div id="receiveFileInfo"></div>
            <div id="receiveFilePercentage"></div>
            <progress id="receiveProgress" max="0" value="0"></progress>
            <button id="receiveAbortBtn"><i class="fas fa-stop-circle"></i>&nbsp; Abort</button>
            <button id="receiveHideBtn"><i class="fas fa-eye-slash"></i>&nbsp; Hide</button>
        </div>

        <!-- Stop File Receive -->

        <!-- Start video URL iframe -->

        <div id="videoUrlCont" class="center fadein">
            <div id="videoUrlHeader">
                <button id="videoUrlCloseBtn" class="fas fa-times"></button>
            </div>
            <br />
            <iframe
                id="videoUrlIframe"
                title="Video Url Player"
                src=""
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen
            ></iframe>
        </div>

        <!-- End Youtube Iframe -->

        <!-- Start Video - Audio player -->

        <div id="videoAudioUrlCont" class="center fadein">
            <div id="videoAudioUrlHeader">
                <button id="videoAudioCloseBtn" class="fas fa-times"></button>
            </div>
            <br />
            <video id="videoAudioUrlElement" src="" autoplay controls></video>
        </div>

        <!-- End Video - Audio player -->

        <!-- Start Video container -->

        <div id="videoPinMediaContainer"></div>
        <div id="videoMediaContainer">
            <!-- <div class="Camera">
                <video></video>
            </div> -->
        </div>

        <div id="audioMediaContainer">
            <!-- <div>
                <audio></audio>
            </div>-->
        </div>

        <!-- End Video container -->

        <!--
        - JS scripts https://cdn.jsdelivr.net
        
        - https://webrtc.github.io/adapter/adapter-latest.js                (https://github.com/webrtcHacks/adapter)
        - https://github.com/leizongmin/js-xss                              (https://www.npmjs.com/package/xss)
        - https://www.npmjs.com/package/marked                              (https://github.com/markedjs/marked)
        - https://www.npmjs.com/package/sweetalert2                         (https://github.com/sweetalert2/sweetalert2)
        - https://www.npmjs.com/package/fabric                              (https://github.com/fabricjs/fabric.js)
        - https://www.npmjs.com/package/qrious                              (https://github.com/neocotic/qrious)
        - https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js    (https://github.com/missive/emoji-mart)
        - https://mozilla.github.io/pdf.js/                                 (https://github.com/mozilla/pdf.js)
        - https://www.jsdelivr.com/package/npm/crypto-js                    (https://github.com/brix/crypto-js/)
        - https://www.npmjs.com/package/tippy.js                            (https://github.com/atomiks/tippyjs) 
        - https://flatpickr.js.org/                                         (https://github.com/flatpickr/flatpickr)
        - https://simonwep.github.io/pickr/                                 (https://github.com/simonwep/pickr)
        - https://uaparser.dev/                                             (https://github.com/faisalman/ua-parser-js)
        - https://www.npmjs.com/package/axios                               (https://github.com/axios/axios)
        - https://highlightjs.org/                                          (https://github.com/highlightjs/highlight.js)
        -->
        <script defer src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/xss/dist/xss.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/fabric@5.3.0-browser/dist/fabric.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.min.js"></script>
        <script defer src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
        <script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script>
        <script defer src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy-bundle.umd.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/ua-parser-js@latest/dist/ua-parser.min.js"></script>
        <script async src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
        <script defer src="/socket.io/socket.io.js"></script>
        <script defer src="../js/localStorage.js"></script>
        <script defer src="../js/helpers.js"></script>
        <script defer src="../js/common.js"></script>
        <script defer src="../js/brand.js"></script>
        <script defer src="../js/buttons.js"></script>
        <script defer src="../js/client.js"></script>
        <script defer src="../js/detectSpeaking.js"></script>
        <script defer src="../js/speechRecognition.js"></script>
        <script defer src="../js/videoGrid.js"></script>
        <script defer src="../js/translate.js"></script>

        <!-- end of Js scripts -->

        <!-- 
		the <video> and <audio> tags are all added and removed dynamically
		in 'onAddStream', 'setupLocalMedia', and 'removePeer'/'disconnect'
		-->
    </body>
</html>
